{% extends 'base_navigation.html' %}
{% load static %}
<html>
<head>
    {% block head_part %}
<title>总用例上传</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- //for-mobile-apps -->
	<link rel="stylesheet"  href="{% static 'bootstrap/css-boot/bootstrap.css' %}"/>
	<link rel="stylesheet"  href="{% static 'bootstrap/css-boot/bootstrap.min.css' %}"/>
	<link href="{% static 'Form_Style/css/style.css' %}" rel="stylesheet" type="text/css" media="all" />
<!--11.13	article-->
<link rel="stylesheet" href="{% static 'Form_Style/css/style-nav.css' %}">
<!---->
<!--	<script src="{% static 'bootstrap/js-boot/jquery-3.3.1.min.js' %}"></script>-->
	<script src="{% static 'bootstrap/js-boot/jquery-3.3.1.min.js' %}"></script>
	<script src="{% static 'bootstrap/js-boot/bootstrap.min.js' %}"></script>

{% endblock head_part %}
</head>
<body>
{% block user_who %}| User：{{ username }}{% endblock user_who %}
{% block body_part %}
<article style="top: 10%;">

<!--	-->
<!--	11.15 wwm  添加上传-->
	<div class="main">
<!--		左右分成十二份-->
		<div class="agileinfo_main_grid container" >
<!--		<div class="form-group">-->
<!--			<div class="container">-->
			<form action="{% url 'generate_yaml:Auto_middle_site' %}" method="post">
                {% csrf_token %}
			<div class="row">
				<div class="styled-input col-sm-1">
 				<label style="color: orangered;">app:</label>
				</div>
				<div class="styled-input col-sm-6">
					{{T_form.search_T}}
				</div>
			</div>
			<div class="row" >
					<div class="col-sm-1" style="padding-left: 0;padding-right: 0">
				<label style="color: orangered;">附件:</label>
				</div>
				<div class="col-sm-9" style="background-color: #2b7676">
{#					<input id="myfile" type="file" style="display: none" multiple>#}
                    <input id="myfile" type="file" style="display: none" >
					<!--显示上传的文件名字-->
					<input type="text" id="FileCover" class="form-control" readonly="true">
				</div>
<!--				<div class="col-sm-2" style="padding-left: 1px;padding-right: 1px;width: 7%;left:2%">-->
				<div class="col-sm-1">
					<button class="btn btn-primary btn-sm " type="button" onclick="$('input[id=myfile]').click();">
						<i class="fa fa-folder-open" id="browse">&nbsp;&nbsp;浏览</i>
					</button>
				</div>
<!--				<div class="col-sm-2" style="padding-left: 1px;padding-right: 1px;width: 7%;left:2%">-->
                <div class="col-sm-1">
					<button class="btn btn-primary btn-sm " type="button" onclick="MyUpload()">
						<i class="fa fa-send" id="upload_status">&nbsp;&nbsp;上传</i>
					</button>
				</div>
				<div class="row">
				    <div  class="col-sm-12" id="show_upload" >
	<!--			TODO 有文字上传会超出表格-->
	<!--			<div  id="show_upload" >-->
				    </div>
                </div>
				<div class="row" >
					<div class="col-sm-12" style="vertical-align:middle;">
				<input type="submit" style="margin-left: 40%;margin-top: 5%" value="结束上传" />
					</div>
				</div>
			</div>
			</form>
<!--			</div>-->
<!--		</div>-->

		</div>
	</div>
	<script>
    $('input[id=myfile]').change(function () {
        var myfiles = document.getElementById("myfile").files;
        var file_index = 0;
        var file_len = myfiles.length;
		var myfilename="";
        while (file_index < file_len) {
        	// var tmp=myfiles[file_index].name;
			if((myfiles[file_index].name.toLowerCase().indexOf(".yaml"))!=-1) {
				myfilename = myfilename + myfiles[file_index].name + ";";
				file_index = file_index + 1;
			}else{
				var tmp="请上传.yaml格式的文件！("+myfiles[file_index].name+")";
				file_index = file_index + 1;
				alert(tmp)
			}
        }
        //console.log(myfiles);
        //$('#FileCover').val($(this).val());
        $('#FileCover').val(myfilename);
        //拼接上传的文件名字并返回到FileCover
    })
</script>
	<script  src="{% static 'Form_Style/download_js/script-upload.js' %}"></script>
<!---->
<!--消息框架	-->
	{% if messages %}
    <script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
    </script>
	{% endif %}
	<div class="agileits_copyright">
		<p>&copy; 2019 reserved</p>
	</div>
	</div>
		</article>


<script  src="{% static 'Form_Style/download_js/script-nav.js' %}"></script>
{% endblock body_part %}
</body>
</html>